<template lang="pug">
  .goods-frame.head-page.page(v-if="getGoods")
    HeadBar(title="商品详情", @closeBar="closeFrame")
    Scroll(v-if='getGoodsImgs', :data='getGoodsImgs')
      .goods-wrap
        .slider-wrap.pos-r(v-if="getGoods.type == 0 " ref="sliderWrapper")
          van-swipe(:autoplay="3000")
            van-swipe-item.slider-item(v-for="(item, index) in getGoodsImgs", :key="index")
              img(:src="item.imgurl")
          //- 3d环物
        iframe(v-if="getGoods.type != 0 ", width="100%", height="100%", frameBorder="0", scrolling="no", :src="getGoods.linkurl")

        van-tabs(:active="activeTab", @click="handleTabSwitch")
          van-tab(v-for="(tab, index) in tabMenu", :title="tab", :key="index")
            .tab-content-item(v-show="getGoods && index == 0")
              .desc-wrap(v-if="getGoods", :data="[getGoods.description]")
                h3.title {{getGoods.name}}
                .price
                  span 库存： {{getGoods.stock}}
                  span 价格：￥
                    strong.red {{getGoods.price}}
                h3.title 商品描述：
              .desc(v-html="getGoods.description")

            .tab-content-item(v-show="index == 1")
              RatingList.mt10(v-if="getGoods", :data="getGoods")

    van-goods-action(v-show='activeTab == 0')
      van-goods-action-icon(
        icon="cart-o",
        text="购物车",
        @click="showCart",
        :badge="getInfoCount")
      van-goods-action-button(text="加入购物车" style='border-radius: 999px;' round type='warning' @click.stop.prevent="addToCart")
</template>

<script>
import Scroll from 'Comps/Scroll'
import CtrlBar from 'Comps/CtrlBar'
import RatingList from 'Comps/Rating/ratingList'
import headBarMixin  from '@/mixins/headBar'
import { mapGetters } from 'vuex'

export default {
  name: 'goodsModal',
  mixins: [headBarMixin],
  data() {
    return {
      baseUrl: $globalconfig.URLS.API,
      logined: false,
      isShow: false,
      goodsCount: 0,
      activeName: 'detail',
      activeTab: 0,
      infoCount: '',
      tabMenu: ['商品详情', '商品评价'],
    }
  },
  mounted() {
    // let goodsNum
    const goodsId = this.$route.query.id

    // 当页面刷新，重新获取商品信息
    if(!this.goodsItem) {
      this.$store.dispatch('fetchGoodsData', goodsId)
    }
  },
  computed: {
    ...mapGetters([
      'cartList',
      'goodsItem',
      'goodsCart',
      'goodsScore'
    ]),
    getInfoCount() {
      if(this.goodsCart && this.goodsCart.list.length > 0) {
        return this.goodsCart.list.length
      }
      return ''
    },
    getGoods() {
      if(this.goodsItem) {
        return this.goodsItem
      }
    },
    getGoodsImgs() {
      if(this.getGoods) {
        return this.getGoods.productimgs
      }
    },
    getCartCount() {
      if(this.cartList) {
        return this.cartList.count + ''
      }
    }
  },
  methods: {
    handleTabSwitch(tab, event) {
      this.activeTab = tab
    },
    showCart() {
      this.$vgo.emit('cart:show')
      this.closeFrame()
    },
    addToCart() {
      // 如果是第一次，则判断是否已经登录
      if(this.$AUTH.checkLogin()) {
        // this.goodsCount++

        this.$store.dispatch('addToCart', {productid: this.getGoods.productid, num: 1})
        return
      }
      this.closeFrame()
    },
    closeFrame() {
      this.$router.go(-1)
      // this.$router.push('/panoview/' + this.$route.params.panoId + '?form=goodsdetail')
    }
  },
  components: {
    Scroll,
    RatingList
  }
}
</script>

<style lang="stylus">
@import '../../assets/styles/mixin.styl'
$black-light = #475669
$danger = #FF4949
.goods-frame
  & > .wrapper
    full-cover()
    top: 40px
    background-color: #fff
  .slider-wrap
    position: relative
    width: 100%
    height: 0
    padding-top: 80%
    .van-swipe, .van-swipe img, frame
      position: absolute
      left: 0
      top: 0
      width: 100%
      height: 100%
  .tab-content-item
    background-color: #fff
    .desc-wrap
      padding: 0 10px
      font-size: 18px
      color: $black-light
      .title
        line-height: 40px
        font-size: 16px
      .price
        padding: 10px 0
        strong.red
          color: $danger
          font-weight: 700
        span
          margin-right: 10px
          font-size: 16px
          color: $black
    .desc
      padding: 10px 10px 60px

      color: $black-light
      font-size: 14px
    img
      width: 100%
</style>
